<ion-header>
  <ion-toolbar mode="ios" color="care">
    <ion-buttons>
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'Details' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="padding: 0">
    <div style="height: 200px;width:100%; text-align: center;padding-top: 50px">
      <ion-avatar style="margin: 0 auto;width: 100px;height: 100px;">
        <ion-img style="width: 100px;height: 100px;" [src]="doctorInfo.avatar_url || '/assets/img/icondoctor.png'">
        </ion-img>
      </ion-avatar>
      <div>{{doctorInfo.nickname}}</div>
      <div>{{orderTime}}</div>
    </div>
    <div
      style="width: calc(100% - 40px);margin-left:20px;height:60px;border-top: 1px solid grey;border-bottom: 1px solid grey;margin-bottom: 20px;overflow: hidden;margin-top: 20px;">
      <div
        style="float: left;width: 50%;height: 50px;border-right: 1px solid grey;text-align: center;padding-top: 5px;color: grey">
        {{ 'Sex' | translate }}
        <div style="color: black">{{['Male' | translate,'Female' | translate][doctorInfo.gender-1]}}</div>
      </div>
      <div style="float: right;width: 50%;height: 50px;text-align: center;padding-top: 5px;color: grey;">
        {{ 'AppointStatus' | translate }}
        <div style="color: black" readonly>{{['Submitted' | translate, 'Accepted' | translate, 'Refused' | translate][orderStatus-1]}}</div>
      </div>
    </div>
    <ion-list>
      <ion-item>
        <ion-label color="care">{{ 'Region' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{doctorInfo.region_name}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label>
            <ion-text color="care">
                {{ 'Department' | translate }}
            </ion-text>
            <ion-text color="medium">
                <h3>{{doctorInfo.department_name}}</h3>
            </ion-text>
        </ion-label>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'PhoneNumber' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{doctorInfo.phone}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'Email' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{doctorInfo.email}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label>
            <ion-text color="care">
                {{ 'DetailedAddress' | translate }}
            </ion-text>
            <ion-text color="medium">
                <h3>{{doctorInfo.address}}</h3>
            </ion-text>
        </ion-label>
      </ion-item>
      

      <ion-item>
        <ion-label color="care">{{ 'ReservationMode' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{['DirecAppoint' | translate,'IndirecAppoint' | translate][doctorInfo.order_type-1]}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'College' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{doctorInfo.university}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'MedicalQualifications' | translate }}</ion-label>
        <ion-text color="medium" slot="end" (click)="showMQ()">{{'Details' | translate}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'CooperativeHospitals' | translate }}</ion-label>
        <ion-text color="medium" slot="end" (click)="showCH()">{{ 'Details' | translate}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label position="stacked" color="care" style="font-size: 16px">{{ 'PersonalHonors' | translate }}</ion-label>
        <ion-text color="medium">
          <p>{{doctorInfo.personal_honor}}</p>
        </ion-text>
      </ion-item>
    </ion-list>
  </div>
</ion-content>
